<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5-5创建页面实现夜间模式和白天模式间的切换</title>
    <style>
        .titleday {
            font-size: large;
            font-weight: bolder;
        }

        .titlenight {
            color: #8F8F8F;
            font-size: large;
            font-weight: bolder;
        }

        .hrday {
            border: none;
            background-color: #187b91;
            height: 2px;
        }

        .hrnight {
            border: none;
            background-color: #D1ECF2;
            height: 2px;
        }

        .txtnight {
            color: #7b7b7b;
        }

    </style>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <div :class="{bgnight:isNight,main:true}">
            <span :class="{titleday:!isNight,titlenight:isNight}">白天模式页面</span>
            <hr :class="{hrday:!isNight,hrnight:isNight}" />
            <p :class="{txtnight:isNight}">
                白天模式下页面背景为白色，文字颜色为黑色，线条为深色。
            </p>

            <input type="checkbox" id="switchMode" @change="switchMode" />
            <label for="switchMode" :class="{txtnight:isNight}">夜间模式</label>
        </div>
    </div>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    isNight: false
                }
            },
            methods: {
                switchMode() {
                    if (this.isNight) {
                        this.isNight = false;
                        document.querySelector('body').removeAttribute('style')
                    } else {
                        this.isNight = true;
                        document.querySelector('body').setAttribute('style', 'background-color:#121212')
                    }
                }
            },
        }).mount("#app");
    </script>
</body>

</html>